<template>
	<m-layout class="order-details" :title="nowCoin['coinname']" :scrollTop="scrollTop" color="#ffffff" scrollColor="#304FFF" gap="0 24 20" barBg="unset">
		<m-block gap="35 29" spa="20 0 0 0" style="position: relative">
			<view class="top">
				<view class="text">{{ nowCoin.coinname }}</view>
				<view class="text1">
					<text></text>
					<text>{{ nowBalance.balance | integer(4) }}</text>
					<text class="fs32 ml-4">≈￥{{ computerValue(nowBalance) }}</text>
				</view>
				<view class="text2">冻结：{{ nowBalance.lockbalance | integer(4) }}</view>
			</view>
			<view class="flex-around mt-20" v-if="![1, 2, 3].includes(Number(userinfo.dls))">
				<m-button v-if="Number(coinConfig[nowCoin.coinid]['istransfer']) == 1" class="wallet_bt ml-24" size="small" type="hollow" @click="transferFn(nowCoin.coinid)">
					轉帳
				</m-button>
				<m-button v-if="Number(coinConfig[nowCoin.coinid]['isout']) == 1" class="wallet_bt ml-24" size="small" type="hollow" @click="withdrawFn(nowCoin.coinid)">
					提現
				</m-button>
			</view>
		</m-block>

		<m-block gap="24 30" spa="24 0 0 0">
			<view class="flex-between" style="margin-bottom: 20rpx">
				<!-- <picker mode="date" fields="month" @change="bindDateChange">
					<view class="flex">
						<view>{{dateStr}}</view>
						<m-icon spa="10" color="#C0C0C0" type="icon-xiangxia"></m-icon>
					</view>
				</picker> -->
				<view class="flex">
					<picker @change="bindTradeChange" :value="tradecurrentIdx" range-key="name" :range="payType1">
						<view class="flex">
							<view>{{ payType[tradeType] }}</view>
							<m-icon spa="10" color="#C0C0C0" type="icon-xiangxia"></m-icon>
						</view>
					</picker>
				</view>
			</view>
			<template v-if="list.length > 0">
				<template v-for="item in list">
					<view class="list_item">
						<view class="flex-between it-text">
							<view>{{ payType[item.tradetype] }}</view>
							<view style="font-size: 32rpx" :style="{ color: item.payout > item.income ? 'red' : '#4cd964' }">
								<text v-if="item.payout">-{{ item.payout }}</text>
								<text v-if="item.income">+{{ item.income }}</text>
							</view>
						</view>
						<view class="flex-between it-text1">
							<view>{{ item.createtime.replace('T', ' ') }}</view>
							<view class="">
								<text class="fs24">{{ item.state | tradeState() }}</text>
							</view>
						</view>
						<view class="flex-between it-text1">
							<view class="">
								<text>{{ item.tradedescription }}</text>
							</view>
						</view>
					</view>
				</template>
			</template>
		</m-block>
		<!-- 加载更多 -->
		<uni-load-more v-if="list.length > 0" :status="loadStatus"></uni-load-more>
		<!-- 缺省页 -->
		<view class="empty_box" v-if="list.length == 0">
			<m-empty title="暫無數據" size="300" gap="200 0 0 0" :loading="isLoading" icon="noData"></m-empty>
		</view>
	</m-layout>
</template>

<script>
import { GetUserBalanceRecord } from '@/api/Trade.js'; // 引入接口
import { getCaption } from '@/utils/tools.js'; // 引入工具库
import { mapState } from 'vuex';
import { balance } from '@/api/Users.js';
export default {
	data() {
		return {
			scrollTop: 0,
			pageIndex: 1, // 当前页数
			pageSize: 1,
			pageCount: 1, // 列表总页数（用于加载更多）
			list: [],
			isLoading: false,
			loadStatus: 'more', // more:加载前的状态，loading:加载中的状态，nomore:没有更多的状态
			likeWords: '', // 查询关键字，空值查询全部
			dateStr: '',
			searchYear: '', // 年
			searchMonth: '', // 月
			tradecurrentIdx: 0,
			tradeType: 0, // 交易类型
			coinCode: '1',
			color: '#fff',
			ftcolor: '#fff',
			topStyle: 'rgba(255, 255, 255, 0)'
		};
	},
	computed: {
		...mapState({
			userinfo: (state) => state.user.userinfo,
			userbalance: (state) => state.user.userbalance,
			enum: (state) => state.general.enum,
			coinConfig: (state) => state.general.coinConfig
		}),
		nowCoin() {
			return this.coinConfig[this.coinCode];
		},
		nowBalance() {
			return this.userbalance[this.coinCode];
		},
		TradeType() {
			return this.enum['TradeType'];
		},

		//本地枚举的类型筛选
		typeList() {
			return {
				1: [0, 2, 3, 4, 11, 12, 51, 52], // CNY
				// 2: [0, 3, 4], // 积分
				3: [0, 2, 3, 4, 42], // USDT
				4: [0, 2,3, 4, 41, 42, 53] // 果实
			}[this.coinCode];
			// 0:"全部"
			// 1:"充值"
			// 2:"提现"
			// 3:"转出"
			// 4:"转入"
			// 6:"系统充值"
			// 7:"系统扣款"
			// 11:"商城消费"
			// 12:"退款"
			// 13:"收益退回"
			// 41:"农场收益"
			// 42: "果实兑换"
			// 51:"代理奖励"
			// 52:"推荐奖励"
			// 53:"服务费"
		},
		payType() {
			return this.enum['TradeType'];
		},
		payTypeTotal() {
			let a = this.enumObjToArr(this.payType, 'id', 'name');
			return a || [];
		},
		payType1() {
			const a = this.payTypeTotal.filter((item) => {
				return this.typeList.indexOf(Number(item.id)) !== -1;
			});
			return a || [];
		}
	},
	onLoad({ coinid, tradeType } = {}) {
		this.coinCode = coinid || 1;
		this.tradeType = tradeType || 0;
	},
	async onShow() {
		this.init();
		await balance();
	},
	onPageScroll({ scrollTop }) {
		this.scrollTop = scrollTop;
	},

	onPullDownRefresh() {
		this.init();
	},
	onReachBottom() {
		if (this.pageIndex < this.pageCount) {
			this.pageIndex += 1;
			this.getList();
		}
	},
	methods: {
		transferFn(coinid) {
			this.Jump(`/pages/wallet/transfer/transfer?coinid=${coinid}`);
		},
		withdrawFn(coinid) {
			this.Jump(`/pages/wallet/withdraw/withdraw?coinid=${coinid}`);
		},
		computerValue(item) {
			const balance = item.balance;
			const price = this.coinConfig[item.coinid]['price'];
			const c = BigInt(this.toWei(balance, 10)) * BigInt(this.toWei(price, 8));
			return this.fromWei(c, 18);
		},
		rechargeFn() {
			console.log('this.userinfo===>', this.userinfo);
			// if (!this.userinfo.idcard) return this.Toast('请先完成实名认证');
			this.Jump('/pages/wallet/recharge/recharge');
		},
		// 初始化
		init() {
			let date = this.formatDate(new Date(), 'yyyy-MM-dd').split('-');
			this.searchYear = date[0];
			this.searchMonth = date[1];
			this.dateStr = this.searchYear + '年' + this.searchMonth + '月';
			this.initData();
		},
		initData() {
			// 初始默认数据
			this.pageIndex = 1;
			this.pageSize = 10;
			this.pageCount = 1;
			this.list = [];
			// 网络请求
			this.requestData();
		},
		// 网络请求
		requestData() {
			this.getList();
		},
		///////////////////////////////////// 事件监听 ////////////////////////////////////////
		// 日期选择监听
		bindDateChange(e) {
			let date = e.detail.value.split('-');
			this.searchYear = date[0];
			this.searchMonth = date[1];

			this.dateStr = this.searchYear + '年' + this.searchMonth + '月';
			this.initData();
		},
		// 交易类型监听
		bindTradeChange({ detail: { value } }) {
			this.tradeType = Number(this.payType1[value]['id']);
			this.initData();
		},
		///////////////////////////////////// 网络请求 ////////////////////////////////////////
		// 获取资金列表
		async getList() {
			this.isLoading = true;
			this.loadStatus = 'loading';
			let res;
			const info = {
				pageIndex: this.pageIndex,
				pageSize: this.pageSize,
				tradetype: this.tradeType == 0 ? '' : this.tradeType.toString(),
				coinid: Number(this.coinCode)
			};
			const { success, list, pageCount } = await GetUserBalanceRecord(info);
			this.isLoading = false;
			uni.stopPullDownRefresh();
			if (success) {
				this.list = [...this.list, ...list];
				this.pageCount = pageCount; // 得到总页数
				this.loadStatus = this.pageIndex < this.pageCount ? 'more' : 'nomore';
			}
		}
	}
};
</script>

<style lang="scss">
.order-details {
	// background: linear-gradient(133deg, #304FFF 0%, #FFD100 100%) no-repeat;
	// background-size: 100% 326rpx;
	background-image: url('@/static/images/pages/wallet/walletBg.png');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% 614rpx;

	::v-deep .top-nav {
		background: unset;
	}

	::v-deep .topbar {
		color: #fff;

		.title {
			color: #fff;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			width: 80%;
		}
	}

	.top {
		text-align: left;
	}

	.text {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.text1 {
		padding: 0rpx 0 0rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: bold;
		color: #333333;

		text:nth-of-type(1) {
			font-size: 52rpx;
		}

		text:nth-of-type(2) {
			font-size: 60rpx;
		}
	}

	.text2 {
		padding-top: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.wallet_bt {
		width: 100%;
		border-radius: 10rpx;
		padding: 14rpx 0;
	}

	.go {
		background: #fa2b47;
	}

	.list_item {
		padding: 27rpx 0;
		border-top: 1rpx solid #eeeeee;

		.it-text {
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.it-text1 {
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #97979f;

			margin-top: 10rpx;
		}
	}
}
</style>
